<template>
  <div class="index_container">
    <dv-full-screen-container class="bg">
      <dv-loading v-if="Loading">Loading...</dv-loading>
      <div class="host_body">
        <!-- 第一行 -->
        <div class="jc_center">
          <!-- 左边 -->
          <dv-decoration-10 style="width: 30%; height: 0.0625rem" />
          <!-- 中间 -->
          <div class="center">
            <dv-decoration-8 style="width: 2.5rem; height: 0.625rem" />
            <div class="title">
              <span class="title-text">大数据可视化平台</span>
              <dv-decoration-6
                class="title-bototm"
                :reverse="true"
                style="width: 3.125rem; height: 0.1rem"
              />
            </div>
            <dv-decoration-8
              :reverse="true"
              style="width: 2.5rem; height: 0.625rem"
            />
          </div>
          <!-- 右边 -->
          <dv-decoration-10
            style="width: 30%; height: 0.0625rem; transform: rotateY(180deg)"
          />
        </div>
        <!-- 第二行 -->
        <div class="jc-between">
          <div class="jc_betweent" style="width: 40%">
            <div
              class="react-right"
              style="
                width: 6.25rem;
                text-align: left;
                background-color: #0f1325;
              "
            >
              <span class="react-before"></span>
              <span class="text">数据分析1</span>
            </div>
            <div class="react-right" style="background-color: #0f1325">
              <span class="text colorBlue">数据分析2</span>
            </div>
          </div>
          <div style="width: 40%" class="jc_betweent">
            <div class="react-left bg-color-blue mr-3">
              <span class="text">vue-big-screen</span>
            </div>
            <div
              class="react-left mr-4"
              style="
                width: 6.25rem;
                background-color: #0f1325;
                text-align: right;
              "
            >
              <span class="react-after"></span>
              <span class="text">2020年03月16日 周一 12:00</span>
            </div>
          </div>
        </div>
        <div class="body-box">
          <!-- 第三行数据 -->
          <div class="content-box">
            <!-- 第一个 -->
            <div>
              <dv-border-box-12>
                <centerLeft1 />
              </dv-border-box-12>
            </div>
            <!-- 第二个 -->
            <div>
              <dv-border-box-12>
                <centerLeft2 />
              </dv-border-box-12>
            </div>
            <!-- 第三个 -->
            <div>
              <center />
            </div>
            <!-- 第四个 -->
            <div>
              <centerRight2 />
            </div>
            <!-- 第五个 -->
            <div>
              <dv-border-box-13>
                <centerRight1 />
              </dv-border-box-13>
            </div>
          </div>

          <!-- 第四行数据 -->
        </div>
      </div>
    </dv-full-screen-container>
  </div>
</template>

<script>
import centerLeft1 from "./centerLeft1.vue";
import centerLeft2 from "./centerLeft2.vue";
import center from "./center.vue";
import centerRight1 from "./centerRight1.vue";
import centerRight2 from "./centerRight2.vue";
export default {
  name: "Index",
  props: [],
  data() {
    return {
      Loading: true,
    };
  },
  components: {
    centerLeft1,
    centerLeft2,
    center,
    centerRight1,
    centerRight2,
  },
  mounted() {
    this.cancelLoading();
  },
  methods: {
    cancelLoading() {
      setTimeout(() => {
        this.Loading = false;
      }, 500);
    },
  },
};
</script>

<style lang="less" scoped>
.index_container {
  color: #d3d6dd;
  background-color: #000000;
  width: 100%;
  height: 100vh;
  .bg {
    padding: 0.2rem 0.2rem 0 0.2rem;
    background-image: url("@/assets/pageBg.png");
    background-size: cover;
    background-position: center center;
  }
  .host_body {
    width: 100%;
    .jc_center {
      display: flex;
      justify-content: space-between;
      .center {
        display: flex;
        flex-direction: row;
        width: 40%;
        .title {
          position: relative;
          width: 80%;
          text-align: center;
          background-size: cover;
          background-repeat: no-repeat;

          .title-text {
            font-size: 0.3rem;
            position: absolute;
            bottom: 0;
            left: 50%;
            transform: translate(-50%);
            white-space: nowrap;
          }

          .title-bototm {
            position: absolute;
            bottom: -0.375rem;
            left: 50%;
            transform: translate(-50%);
          }
        }
      }
    }
    .jc-between {
      display: flex;
      justify-content: space-between;
      width: 100%;
      .jc_betweent {
        display: flex;
        .react-right {
          cursor: pointer;
          font-size: 0.225rem;
          width: 3.75rem;
          height: 0.625rem;
          line-height: 0.625rem;
          text-align: center;
          transform: skewX(45deg);
          margin: 0 0.3rem;
          .react-before {
            position: absolute;
            left: -0.3125rem;
            top: 0;
            height: 0.625rem;
            width: 0.625rem;
            background-color: #0f1325;
            transform: skewX(-45deg);
          }

          .text {
            display: inline-block;
            transform: skewX(-45deg);
          }
        }
        .react-left {
          cursor: pointer;
          font-size: 0.225rem;
          width: 3.75rem;
          height: 0.625rem;
          line-height: 0.625rem;
          text-align: center;
          transform: skewX(-45deg);
          margin: 0 0.3rem;
          .react-after {
            position: absolute;
            right: -0.3125rem;
            top: 0;
            height: 0.625rem;
            width: 0.625rem;
            background-color: #0f1325;
            transform: skewX(45deg);
          }

          .text {
            display: inline-block;
            transform: skewX(45deg);
          }
        }
        .bg-color-blue {
          background-color: #1a5cd7;
        }
      }
    }
    .body-box {
      margin-top: 0.2rem;
      display: flex;
      flex-direction: column;

      //下方区域的布局
      .content-box {
        display: grid;
        grid-template-columns: 2fr 3fr 5fr 3fr 2fr;
      }

      // 底部数据
    }
  }
}
</style>